<template>
  <div class="mainPage">
    <div class="check-area">
      <el-checkbox @change="handleZhuqiaoChange" v-model="isZhuqiao"
        >主桥</el-checkbox
      >
      <el-checkbox @change="handleZhuqiaoChange" v-model="isLinjian"
        >临建</el-checkbox
      >
    </div>
    <div class="iframe-btn-container">
      <div @click="handleTajiBtnClick_new('Equipment')">设备统计</div>
      <div @click="handleTajiBtnClick_new('Material')">物资统计</div>
      <div  @click="handleTajiBtnClick_new('YinLI')">盈亏分析</div>
    </div>
    <div class="left_Com">
      <!-- 左上: 投资统计 -->
      <div class="left_top">
        <p class="title">投资统计</p>
        <p class="invest">
          <span class="pro_invest">项目总投资</span>
          <span class="year_invest">
            <!-- <img
              class="left"
              @click="changeYear(1)"
              src="../../assets/main/left.svg"
              alt=""
            /> -->
            {{ invest_info.year }}年度计划总投资
            <!-- <img
              class="right"
              @click="changeYear(2)"
              src="../../assets/main/right.svg"
              alt=""
            /> -->
          </span>
        </p>
        <p class="plan_amount">
          <span class="amount" style="left: 21px; top: 4px">{{
            invest_info.pro_plan
          }}</span>
          <span class="danwei" style="left: 22px">万元</span>
          <span class="amount" style="left: 75px; top: 4px">{{
            invest_info.year_plan
          }}</span>
          <span class="danwei" style="left: 75px">万元</span>
        </p>
        <p class="completed_amount">
          <span class="zwc" style="left: 22px"
            >完成额 {{ invest_info.pro_complete }} 万元</span
          >
          <span class="ndwc" style="left: 83px"
            >完成额 {{ invest_info.year_complete }} 万元</span
          >
        </p>
        <div class="left_top_echarts">
          <div class="xmtzwcd" ref="xmtzwcdechart"></div>
          <div class="ndtzwcd" ref="ndtzwcdechart"></div>
        </div>
        <p>
          <span class="xmtzwcd_text" style="left: 58px">项目投资完成度</span
          ><span class="xmtzwcd_text" style="left: 150px">年度投资完成度</span>
        </p>
      </div>

      <!-- 左中: 年度产值完成统计-->
      <div class="left_center">
        <p class="title">
          年度产值完成统计
          <el-dropdown size="mini" class="dropdown" @command="handleCommand">
            <span class="el-dropdown-link">
              {{ currentYear }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="2019">2019</el-dropdown-item>
              <el-dropdown-item command="2020">2020</el-dropdown-item>
              <el-dropdown-item command="2021">2021</el-dropdown-item>
              <el-dropdown-item command="2022">2022</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
        <div class="left_center_echart" ref="ndczechart"></div>
      </div>

      <!-- 左下: 项目进度 -->
      <div class="left_bottom">
        <p class="title">项目进度</p>
        <p class="xmjdinfo">
          <span class="name">项目总工期</span><span class="val">1796天</span
          ><span class="name" style="margin-left: 30px">已施工</span
          ><span class="val1">{{ offsetTime }}天</span>
        </p>
        <div class="left_bottom_echart" v-if="progress.length">
          <div v-for="(item, index) in progress" :key="index">
            <div>{{ item.name }}</div>
            <div>
              <el-progress
                :stroke-width="12"
                :percentage="
                  new Number(((item.done / item.plan) * 100).toFixed())
                "
              ></el-progress
              >已完成 {{ item.done }} / 计划 {{ item.plan }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right_Com">
      <!-- 右上: 天气预报 -->
      <div class="right_top">
        <p class="title">天气预告</p>

        <div class="n_top">
          <div class="n_top_chilren1" v-if="tianqi.length">
            <p v-if="tianqi[0]" class="address" :title="tianqi[0].wea">
              录安洲：{{ tianqi[0].wea }}
            </p>

            <p v-if="tianqi[0]" class="temperature">{{ tianqi[0].tem }}℃</p>
          </div>

          <div class="n_top_chilren2">
            <img :src="tianqiWeaImgUrl" />
          </div>

          <div class="n_top_chilren3" v-if="tianqi.length && tianqi[0]">
            <p>温度：{{ tianqi[0].tem2 }}~{{ tianqi[0].tem1 }}℃</p>

            <p>风向：{{ tianqi[0].win[0] }}</p>

            <p>风速：{{ tianqi[0].win_meter }}</p>
          </div>
        </div>

        <div
          class="n_bottom"
          v-if="tianqi.length && tianqi[1] && tianqi[2] && tianqi[3]"
        >
          <p>
            <span class="week">{{ tianqi[1].week }}</span
            ><span class="weather">{{ tianqi[1].wea }}</span
            ><span class="temperature"
              >{{ tianqi[1].tem2 }}~{{ tianqi[1].tem1 }}℃</span
            ><span class="wind">{{
              tianqi[1].win[0] + tianqi[1].win_meter
            }}</span>
          </p>

          <p>
            <span class="week">{{ tianqi[2].week }}</span
            ><span class="weather">{{ tianqi[2].wea }}</span
            ><span class="temperature"
              >{{ tianqi[2].tem2 }}~{{ tianqi[2].tem1 }}℃</span
            ><span class="wind">{{
              tianqi[2].win[0] + tianqi[2].win_meter
            }}</span>
          </p>

          <p>
            <span class="week">{{ tianqi[3].week }}</span
            ><span class="weather">{{ tianqi[3].wea }}</span
            ><span class="temperature"
              >{{ tianqi[3].tem2 }}~{{ tianqi[3].tem1 }}℃</span
            ><span class="wind">{{
              tianqi[3].win[0] + tianqi[3].win_meter
            }}</span>
          </p>
        </div>
      </div>
      <!-- 右中: z -->
      <div class="right_center">
        <p class="title">劳力投入计划</p>
        <div class="right_center_echart" ref="lltrjhechart"></div>
        <!-- <div class="n_top">
          <div class="right_center_echart" ref="zlglechart"></div>
        </div>
        <div class="n_bottom">
          <div class="left_bottom_imglist">
            <el-carousel :interval="3000" type="card" indicator-position="none" height="75px" style="width:340px;margin-left: 30px;">
              <el-carousel-item v-for="(item,i) in zhiliangList" :key="i">
                <div class="imglist">
                  <img :src="item.imgUrl" @click="changeCenterBigShow('image','质量管理',item.imgUrl)" style="width:180px;height:65px;"/>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div> -->
      </div>

      <div class="right_bottom">
        <p class="title">主材供应计划</p>
        <div class="right_bottom_echart" ref="zcgyechart"></div>
        <!-- <div class="aqgl-echart" ref="aqjyechart"></div>
        <span class="aqjy" @click="changeAqgl('aqjy')">安全教育</span>
        <span class="yhtj" @click="changeAqgl('yhtj')">隐患统计</span> -->
      </div>
    </div>

    <div class="bottom_Com">
      <div
        class="bottom_title"
        style="font-weight: bold; display: flex; justify-content: space-between"
      >
        <!-- <div class="title">常泰长江大桥</div>
        <div class="title">
          <ul>
            <li
              class="content"
              style="color: rgb(1, 214, 186); margin-left: 50px"
            >
              计划
            </li>
            <li class="content" style="color: rgb(41, 169, 255)">进度</li>
          </ul>
        </div> -->
        <div
          class="title"
          style="font-size: 16px; color: white; font-weight: 300"
        >
          进度模拟
        </div>
        <div class="title">
          <span
            style="font-size: 14px; margin-right: 20px; color: rgb(1, 214, 186)"
            >未完成</span
          >
          <!-- <span
            style="
              font-size: 14px;
              margin-right: 20px;
              color: rgb(13, 107, 208);
            "
            >在建</span
          > -->
          <span
            style="font-size: 14px; margin-right: 20px; color: rgb(232, 150, 0)"
            >已完成</span
          >
        </div>
      </div>
      <div class="bottom_timeLine">
        <div class="my_timeline">
          <div
            class="my_timeline_item"
            v-for="(item, index) in timeLineList"
            :key="index"
          >
            <div
              class="my_timeline_time"
              :style="{
                color:
                  item.state == '在建'
                    ? 'rgb(41, 169, 255)'
                    : item.state == '未开工'
                    ? 'rgb(1, 214, 186)'
                    : 'rgb(232, 150, 0)',
              }"
            >
              {{ item.planTime }}
            </div>
            <div
              class="my_timeline_node"
              :style="{
                backgroundColor:
                  item.state == '在建'
                    ? 'rgb(41, 169, 255)'
                    : item.state == '未开工'
                    ? 'rgb(1, 214, 186)'
                    : 'rgb(232, 150, 0)',
              }"
            ></div>
            <!-- @click="changeCenterBigShow('image', item.info, item.imgUrl)" -->
            <div
              v-if="index == timeLineList.length - 1"
              class="my_timeline_Line"
              style="visibility: hidden"
            ></div>
            <!--占位隐藏-->
            <div
              v-else
              class="my_timeline_Line"
              :style="{
                border:
                  item.state == '在建'
                    ? '2px solid rgb(41, 169, 255)'
                    : item.state == '未开工'
                    ? '2px solid rgb(1, 214, 186)'
                    : '2px solid rgb(232, 150, 0)',
              }"
            ></div>
            <div
              class="my_timeline_content"
              :style="{
                color:
                  item.state == '在建'
                    ? 'rgb(41, 169, 255)'
                    : item.state == '未开工'
                    ? 'rgb(1, 214, 186)'
                    : 'rgb(232, 150, 0)',
              }"
            >
              {{ item.info }}
            </div>
            <!-- <div class="my_timeline_time"></div> -->
            <!-- <div class="my_timeline_time" style = "color: rgb(1, 214, 186)">{{item.completeTime}}</div> -->
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="isShowTajiDialog"
      width="1500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="taji-dialog"
    >
      <div
        v-if="isShowTajiDialog"
        style="width: 100%; height: 800px; background-color: white"
      >
        <iframe
          style="display: block; width: 100%; height: 100%"
          :src="currentIframeSrc"
          frameborder="0"
        >
        </iframe>
      </div>
    </el-dialog>
    <el-dialog
      title="设备统计"
      :visible.sync="isShowEquipmentDialog"
      width="1500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="taji-dialog"
    >
      <div class="title">
        <el-date-picker
          v-model="date"
          type="month"
          value-format="yyyy-MM"
          @change="handleSelectChange2('Equipment')"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <div v-if="isShowEquipmentDialog" style="width: 100%; height: 800px">
        <div class="left_center_echart" ref="eqchart"></div>
      </div>
    </el-dialog>
    <el-dialog
      title="物资统计"
      :visible.sync="isShowMaterialDialog"
      width="1500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="taji-dialog"
    >
      <div class="title">
        <el-date-picker
          v-model="date"
          type="month"
          value-format="yyyy-MM"
          @change="handleSelectChange2('Material')"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <div style="width: 100%; height: 800px">
        <div class="center_echart" ref="chart1"></div>
        <div class="center_echart" ref="chart2"></div>
      </div>
    </el-dialog>
    <el-dialog
      title="盈亏分析"
      :visible.sync="isShowYinLIDialog"
      width="1500px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      class="taji-dialog"
    >
      <div class="title">
        <el-date-picker
          v-model="date"
          type="month"
          value-format="yyyy-MM"
          @change="handleSelectChange2('YinLI')"
          placeholder="选择月"
        >
        </el-date-picker>
      </div>
      <div style="width: 100%; height: 800px">
        <div class="diadiv_title">
          <div class="divchar">{{ Title1 }}</div>
          <div class="divchar">{{ Title2 }}</div>
        </div>
        <div class="diadiv">
          <div class="divchar" ref="ychart1"></div>
          <div class="divchar" ref="ychart2"></div>
          <div class="divchar" ref="ychart3"></div>
        </div>
        <div class="diadiv_title">
          <div class="divchar">{{ Title3 }}</div>
          <div class="divchar">{{ Title4 }}</div>
        </div>
        <div class="diadiv">
          <div class="divchar" ref="ychart4"></div>
          <div class="divchar" ref="ychart5"></div>
          <div class="divchar" ref="ychart6"></div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import * as echarts from 'echarts'
import * as axios from 'axios'

import {
  GetEbsTypeMaterialTitle,
  GetDatasToList,
  GetEquipmentList,
  GetMaterialList,
  GetYLList
} from '@/api/main'

// 获取一张图中的数据
// export let getElementFromJunde = ()=>{return axios.get('http://58.49.74.231:114/bridge/scene/content/share?id=64&shareKey=04e2495f-6c51-4f0e-8099-a69534a93833')}

export default {
  components: {},
  data () {
    // 左上  项目投资统计  环状图
    this.xmtztjEchartOption = {
      color: ['#0D5050', '#01d6ba'],
      series: [
        {
          name: '项目总投资',
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            color: '#01d6ba',
            fontWeight: 'bold'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          type: 'pie',
          radius: ['60%', '90%'],
          data: []
        }
      ]
    }
    // 左上  年度投资统计  环状图
    this.ndtztjEchartOption = {
      color: ['#0D5050', '#01d6ba'],
      series: [
        {
          name: '年度总投资',
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          label: {
            show: true,
            position: 'center',
            color: '#01d6ba',
            fontWeight: 'bold'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          type: 'pie',
          radius: ['60%', '90%'],
          data: []
        }
      ]
    }
    // 左中  年度产值
    this.ndczEchartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月'],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      // dataZoom: [
      // {
      //     type: 'inside',
      //     start: 0,
      //     end: 25,
      // }
      // ],
      series: [
        {
          name: '计划/万元',
          type: 'bar',
          barCategoryGap: '40%',
          label: {
            show: true,
            color: '#fff',
            position: 'top',
            fontSize: 8
          },
          data: [
            13062, 7750, 6438, 8812, 9563, 10251, 7626, 10250, 8875, 7563, 9438,
            9375, 6688, 7663
          ],
          itemStyle: { normal: { color: '#01d6ba' } }
        },
        {
          name: '实际/万元',
          type: 'bar',
          barCategoryGap: '40%',
          label: {
            show: true,
            color: '#fff',
            position: 'top',
            fontSize: 8
          },
          data: [10865, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          itemStyle: { normal: { color: '#1069cd' } },
          emphasis: {
            barBorderRadius: 30
          }
        }
      ]
    }

    // 左下  项目进度
    this.xmjdEchartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '1%',
        top: '4%',
        containLabel: true
      },

      xAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      yAxis: {
        type: 'category',
        data: [
          '沉井/kg',
          '钢梁/节段',
          'CFRP索/根',
          '斜拉索/根',
          '吊索/根',
          '承台/个',
          '钻孔桩/根',
          '墩身/个',
          '预制梁/榀',
          '现浇梁/米'
        ],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: ['总数量', '已完成'],
        textStyle: {
          fontSize: 10, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      series: [
        {
          name: '总数量',
          type: 'bar',
          stack: 'num', // 折叠显示
          barCategoryGap: '40%',
          label: {
            show: true,
            color: '#fff',
            position: 'right'
          },
          data: [18405.5, 127, 14, 156, 42, 105, 1191, 134, 846, 1416.4],
          itemStyle: {
            normal: { color: '#01d6ba', barBorderRadius: [0, 0, 0, 0] }
          }
        },
        {
          name: '已完成',
          type: 'bar',
          stack: 'num', // 折叠显示
          barCategoryGap: '40%',
          label: {
            show: true,
            color: '#fff',
            position: 'right'
          },
          data: [18405.5, 0, 0, 0, 0, 17, 845, 3, 0, 0],
          itemStyle: { normal: { color: 'rgb(13, 107, 208)' } },
          emphasis: {
            barBorderRadius: 30
          }
        }
      ]
    }
    // 右中  劳力投入
    this.lltrjhEchartOption = {
      tooltip: {
        // trigger: "axis",
        // axisPointer: {
        //   // 坐标轴指示器，坐标轴触发有效
        //   type: "line", // 默认为直线，可选为：'line' | 'shadow'
        // },
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          },
          lineStyle: {
            width: 2
          },
          crossStyle: {
            width: 2
          }
        }
      },
      grid: {
        left: '1%',
        right: '4%',
        bottom: '0%',
        top: '5%',
        containLabel: true
      },
      legend: {
        orient: 'horizontal',
        top: '5%',
        right: '5%',
        itemWidth: 20, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '2019-3',
          '2019-4',
          '2020-1',
          '2020-2',
          '2020-3',
          '2020-4',
          '2021-1',
          '2021-2',
          '2021-3',
          '2021-4',
          '2022-1',
          '2022-2',
          '2022-3',
          '2022-4',
          '2023-1',
          '2023-2',
          '2023-3',
          '2023-4',
          '2024-1',
          '2024-2',
          '2024-3'
        ],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        type: 'value',
        // splitNumber : 200,
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
        // axisLabel:{
        //   interval: 0, //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数
        // }
      },
      series: [
        {
          name: '劳力(人)',
          data: [
            803, 1048, 589, 1176, 1273, 2303, 2276, 2400, 1341, 1021, 1021,
            1021, 1011, 1011, 891, 846, 839, 769, 579, 422, 252
          ],
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(255, 158, 68)'
              },
              {
                offset: 1,
                color: 'rgb(255, 70, 131)'
              }
            ])
          }
        }
      ]
    }
    // 右中  质量管理
    this.zlglEchartOption = {
      tooltip: {
        // trigger: "axis",
        // axisPointer: {
        //   // 坐标轴指示器，坐标轴触发有效
        //   type: "line", // 默认为直线，可选为：'line' | 'shadow'
        // },
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '5%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 10, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      grid: {
        left: '13%',
        right: '10%',
        bottom: '17%',
        top: '0%'
      },
      xAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      yAxis: {
        type: 'category',
        data: ['总体', '主桥', '引桥'],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
        // interval:80
      },
      series: [
        {
          name: '已处理',
          type: 'bar',
          stack: '总量',
          barCategoryGap: '40%',
          barWidth: 15,
          label: {
            show: true,
            color: '#fff',
            position: 'insideRight'
          },
          data: [9, 5, 4],
          itemStyle: {
            normal: { color: '#01d6ba', barBorderRadius: [0, 0, 0, 0] }
          }
        },
        {
          name: '未处理',
          type: 'bar',
          stack: '总量',
          barCategoryGap: '40%',
          barWidth: 15,
          label: {
            show: true,
            color: '#fff',
            position: 'right'
          },
          data: [3, 2, 1],
          itemStyle: {
            normal: {
              color: 'rgb(13, 107, 208)',
              barBorderRadius: [0, 20, 20, 0]
            }
          },
          emphasis: {
            barBorderRadius: 30
          }
        }
      ]
    }
    // 右中  质量管理图片
    this.zhiliangList = [
      {
        imgUrl: require('../../assets/main/质量管理/1.jpg'),
        problem: '未焊好',
        status: '已处理',
        dealPerson: '王银'
      },
      {
        imgUrl: require('../../assets/main/质量管理/2.jpg'),
        problem: '未拧紧',
        status: '已处理',
        dealPerson: '王银'
      },
      {
        imgUrl: require('../../assets/main/质量管理/3.jpg'),
        problem: '脱落',
        status: '已处理',
        dealPerson: '王强'
      },
      {
        imgUrl: require('../../assets/main/质量管理/4.jpg'),
        problem: '未拧紧',
        status: '已处理',
        dealPerson: '王银'
      }
    ]
    // 右下  主材供应
    this.zcgyjhEchartOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          },
          lineStyle: {
            width: 2
          },
          crossStyle: {
            width: 2
          }
        }
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        left: '5%',
        itemWidth: 20, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // toolbox: {
      // feature: {
      //   saveAsImage: {}
      // }
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: [
            '2019-4',
            '2020-1',
            '2020-2',
            '2020-3',
            '2020-4',
            '2021-1',
            '2021-2',
            '2021-3',
            '2021-4',
            '2022-1',
            '2022-2',
            '2022-3',
            '2022-4',
            '2023-1',
            '2023-2',
            '2023-3',
            '2023-4',
            '2024-1',
            '2024-2',
            '2024-3'
          ],
          axisLine: {
            lineStyle: {
              color: ['rgba(21, 238, 212, 30%)']
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff' // 更改坐标轴文字颜色
            }
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: ['rgba(21, 238, 212, 30%)']
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff' // 更改坐标轴文字颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(21, 238, 212, 30%)'],
              width: 1,
              type: 'solid'
            }
          }
        }
      ],
      series: [
        {
          name: '水泥(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            559.98, 8120, 6092, 8128, 20893, 41629, 26784, 42038, 33630, 28025,
            28025, 28025, 14013, 0, 0, 0, 0, 0, 0, 0
          ]
        },
        {
          name: '钢筋(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            0, 0, 156, 1896, 7691, 11041, 11916, 9621, 7697, 6414, 6414, 6414,
            3207, 0, 0, 0, 0, 0, 0, 0
          ]
        },
        {
          name: '碎石(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            2067, 20874, 16590, 30852, 78627, 92270, 220408, 68282, 54625,
            45521, 45521, 45521, 22761, 0, 0, 0, 0, 0, 0, 0
          ]
        },
        {
          name: '黄沙(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            1451, 21668, 17280, 23603, 62674, 74680, 165639, 49083, 39266,
            32722, 32722, 32722, 16361, 0, 0, 0, 0, 0, 0, 0
          ]
        },
        {
          name: '预应力筋(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            0, 0, 0, 0, 487, 731, 731, 731, 731, 731, 585, 146, 0, 0, 0, 0, 0,
            0, 0, 0
          ]
        },
        {
          name: '钢梁(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            0, 0, 0, 0, 0, 0, 0, 9918, 12397, 13637, 14876, 14876, 16116, 17356,
            12397, 8678, 3719, 0, 0, 0
          ]
        },
        {
          name: '斜拉索(t)',
          type: 'line',
          // stack: "总量",
          areaStyle: {},
          data: [
            0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1232, 1806, 1889, 1806, 1478, 0,
            0, 0
          ]
        }
      ]
    }
    // 右下  安全教育
    this.aqjyEchartOption = {
      tooltip: {
        trigger: 'item',
        color: [
          '#1d67ff',
          '#1a9eff',
          '#1cffc8',
          '#1aff68',
          '#7cff1c',
          '#febe1c'
        ],
        formatter: function (para) {
          var res =
            para.name +
            ':' +
            para.value +
            '人<br/>' +
            para.seriesName +
            ':' +
            para.data.num +
            '次'
          return res
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '7%',
        containLabel: true
      },
      color: ['#1d67ff', '#1a9eff', '#1cffc8', '#1aff68', '#7cff1c', '#febe1c'],
      legend: {
        data: ['', '', '']
      },
      series: [
        {
          name: '安全教育次数',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {
              label: {
                show: true,
                formatter: '{b} : {c}',
                color: '#fff'
              },
              labelLine: { show: true }
            }
          },
          data: [
            { value: 70, name: '管理人员', num: 70 },
            { value: 7, name: '特种作业人员', num: 7 },
            { value: 140, name: '普通作业人员', num: 140 }
          ]
        }
      ]
    }
    // 右下  隐患统计
    this.yhtjEchartOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '7%',
        containLabel: true
      },
      color: ['#1d67ff', '#1a9eff', '#1cffc8', '#1aff68', '#7cff1c', '#febe1c'],
      legend: {
        orient: 'horizontal',
        x: 'center',
        y: 'bottom',
        top: '230',
        data: ['二级隐患', '三级隐患', '四级隐患', '一级隐患'],
        textStyle: {
          // 图例文字的样式
          color: '#fff'
          // fontSize:16
        }
      },
      series: [
        {
          name: '安全隐患统计',
          type: 'pie',
          radius: ['30%', '50%'],
          center: ['50%', '45%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false,
              fontSize: '30',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            normal: {
              label: {
                show: true,
                formatter: '{b} : {c} ({d}%)',
                color: '#fff'
              },
              labelLine: { show: true }
            }
          },
          data: [
            { value: 5, name: '二级隐患' },
            { value: 1, name: '三级隐患' },
            { value: 2, name: '四级隐患' },
            { value: 8, name: '一级隐患' }
          ]
        }
      ]
    }
    this.timeLineList = [
      {
        planTime: '2019年9月1日',
        completeTime: null,
        state: '已完成',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        icon: 'el-iconprev',
        info: '开工'
      },
      {
        planTime: '2020年1月16日',
        completeTime: null,
        state: '已完成',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: '6#钢沉井定位着床'
      },
      {
        planTime: '2021年3月27日',
        completeTime: null,
        state: '已完成',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: '6#钢沉井完成封底完成'
      },
      {
        planTime: '2022年6月5日',
        completeTime: null,
        state: '未开工',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: '录安洲非通航孔桥(3×124m)施工完成'
      },
      {
        planTime: '2022年12月31日',
        completeTime: null,
        state: '未开工',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: `6#墩主塔施工完成
        专用航道桥施工完成
        `
      },
      {
        planTime: '2023年2月26日',
        completeTime: null,
        state: '未开工',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: '常州侧公铁合建段引桥施工完成'
      },
      {
        planTime: '2023年3月17日',
        completeTime: null,
        state: '未开工',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: `日常州侧高速公路、
        一级公路合建段及一级公路段施工完成`
      },
      {
        planTime: '2023年3月31日',
        completeTime: null,
        state: '未开工',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: '录安洲专用航道桥(388m)施工完成'
      },
      {
        planTime: '2023年12月31日',
        completeTime: null,
        state: '未开工',
        imgUrl: null,
        bgcolor: '#e4e7ed',
        info: '全线贯通'
      }
    ]
    // BIM模型的位置
    this.bimPosition = [
      {
        name: '项目部',
        destination: {
          x: -2705029.6108805514,
          y: 4690654.097374107,
          z: 3359812.533174551
        },
        orientation: {
          heading: 5.524868371118769,
          pitch: -0.8654608926505825,
          roll: 6.279980183733361
        }
      },
      {
        name: '钢筋加工厂',
        destination: {
          x: -2704785.814935603,
          y: 4690684.078043588,
          z: 3359621.7503063553
        },
        orientation: {
          heading: 0.7890966560854062,
          pitch: -0.23047049844553547,
          roll: 0.0021980091850917205
        }
      },
      {
        name: '陆上拌和站',
        destination: {
          x: -2704142.600028466,
          y: 4691908.935143334,
          z: 3358695.3276988454
        },
        orientation: {
          heading: 5.851934857100899,
          pitch: -0.5799262669773846,
          roll: 6.2816769405860065
        }
      },
      {
        name: '水上拌和站',
        destination: {
          x: -2704058.674074261,
          y: 4690385.765367225,
          z: 3360720.3037149804
        },
        orientation: {
          heading: 0.6217857715993649,
          pitch: -0.5567632974717407,
          roll: 0.0020712432859602004
        }
      },
      {
        name: '沉井',
        destination: {
          x: -2704123.700776692,
          y: 4690135.619138667,
          z: 3361003.687742617
        },
        orientation: {
          heading: 4.577105190271557,
          pitch: -0.45565121684663135,
          roll: 6.2798597843880195
        }
      },
      {
        name: '栈桥',
        destination: {
          x: -2704103.5799531774,
          y: 4690898.423343822,
          z: 3360437.172385823
        },
        orientation: {
          heading: 0.1894224281163268,
          pitch: -0.5145955890096281,
          roll: 0.0006530353815152878
        }
      },
      {
        name: '试验室',
        destination: {
          x: -2703900.0677684373,
          y: 4691729.932437436,
          z: 3358830.7200734005
        },
        orientation: {
          heading: 0.5129858703910237,
          pitch: -0.4671723134081378,
          roll: 0.0016585012207768202
        }
      },
      {
        name: '钢结构加工厂',
        destination: {
          x: -2704984.9640331515,
          y: 4690354.369103005,
          z: 3359897.815421583
        },
        orientation: {
          heading: 3.928366228952012,
          pitch: -0.2768072845373106,
          roll: 6.280968178416881
        }
      },
      {
        name: '监理驻地',
        destination: {
          x: -2704946.743767598,
          y: 4690427.221241941,
          z: 3359828.469481299
        },
        orientation: {
          heading: 5.459157968495279,
          pitch: -0.5972558208923369,
          roll: 6.280506770559283
        }
      },
      {
        name: '产业工人培训中心',
        destination: {
          x: -2704895.0866789734,
          y: 4690358.1802505525,
          z: 3359944.509804145
        },
        orientation: {
          heading: 3.3452613424422637,
          pitch: -0.5497797196752785,
          roll: 6.282471658520768
        }
      },
      {
        name: '料石码头',
        destination: {
          x: -2704492.3728965865,
          y: 4691375.691066803,
          z: 3358938.817305846
        },
        orientation: {
          heading: 1.7640074167563649,
          pitch: -0.45483123701108763,
          roll: 0.0032909458433545424
        }
      },
      {
        name: '8#墩提升站',
        destination: {
          x: -2703705.121440941,
          y: 4690817.755967394,
          z: 3360433.1682700077
        },
        orientation: {
          heading: 0.3868155067690964,
          pitch: -0.5200704328486521,
          roll: 0.0013123124196674496
        }
      },
      {
        name: '14#-S1#墩提升站',
        destination: {
          x: -2703375.6545302244,
          y: 4691454.621180256,
          z: 3359807.7637853967
        },
        orientation: {
          heading: 5.482505747353214,
          pitch: -0.466663311763563,
          roll: 6.280760506119098
        }
      }
    ]
    this.Char1Option = {
      title: {
        text: '机械设备利用率',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white',
          fontSize: '28'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: '{b}: <br /> 利用率：{c0}% <br /> 控制损耗：{c1}%'
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: "4%",
        right: "4%",
        bottom: "0%",
        top: "20%",
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        // data: ["一月", "二月", "三月", "四月"],
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          formatter: '{value} %',
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '利用率',
          type: 'bar',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top',
            //  fontSize: 8,
            formatter: function (params) {
              return params.value + '%'
            }
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        },
        {
          name: '控制损耗',
          type: 'line',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top',
            //  fontSize: 8,
            formatter: function (params) {
              return params.value + '%'
            }
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        }
      ]
    }
    this.Char2Option = {
      title: {
        text: '机械设备利用率',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white',
          fontSize: '28'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: '{b}: <br /> 利用率：{c0}% <br /> 控制损耗：{c1}%'
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: "4%",
        right: "4%",
        bottom: "0%",
        top: "20%",
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        // data: ["一月", "二月", "三月", "四月"],
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          interval: 0,
          rotate: 40,
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          formatter: '{value} %',
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '利用率',
          type: 'bar',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top',
            //  fontSize: 8,
            formatter: function (params) {
              return params.value + '%'
            }
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        },
        {
          name: '控制损耗',
          type: 'line',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top',
            //  fontSize: 8,
            formatter: function (params) {
              return params.value + '%'
            }
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        }
      ]
    }
    this.YChar1Option = {
      title: {
        text: '盈亏统计',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
        // formatter: "{b}: {c}%",
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ["一月", "二月", "三月", "四月"],
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        name: '单位：万元',
        nameTextStyle: {
          color: 'white'
        },
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          //  formatter: "{value} %",
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '利用率',
          type: 'bar',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top'
            //  fontSize: 8,
            // formatter: function (params) {
            //   return params.value + "%";
            // },
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        }
      ]
    }
    this.YChar2Option = {
      title: {
        text: '盈亏统计',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
        // formatter: "{b}: {c}%",
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ["一月", "二月", "三月", "四月"],
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        name: '单位：万元',
        nameTextStyle: {
          color: 'white'
        },
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          //  formatter: "{value} %",
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '利用率',
          type: 'bar',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top'
            //  fontSize: 8,
            // formatter: function (params) {
            //   return params.value + "%";
            // },
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        }
      ]
    }
    this.YChar4Option = {
      title: {
        text: '盈亏统计',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
        // formatter: "{b}: {c}%",
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ["一月", "二月", "三月", "四月"],
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        name: '单位：万元',
        nameTextStyle: {
          color: 'white'
        },
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          //  formatter: "{value} %",
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '利用率',
          type: 'bar',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top'
            //  fontSize: 8,
            // formatter: function (params) {
            //   return params.value + "%";
            // },
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        }
      ]
    }
    this.YChar5Option = {
      title: {
        text: '盈亏统计',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
        // formatter: "{b}: {c}%",
      },
      legend: {
        orient: 'horizontal',
        // x: 'right',
        right: '2%',
        itemWidth: 16, // 图例的宽
        data: '',
        textStyle: {
          fontSize: 12, // 字体大小
          color: '#ffffff' // 字体颜色
        }
      },
      // color: ['#01d6ba', '#1069cd'],
      grid: {
        left: '4%',
        right: '4%',
        bottom: '0%',
        top: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // data: ["一月", "二月", "三月", "四月"],
        data: [],
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        }
      },
      yAxis: {
        name: '单位：万元',
        nameTextStyle: {
          color: 'white'
        },
        type: 'value',
        axisLine: {
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)']
          }
        },
        axisLabel: {
          show: true,
          interval: 'auto',
          //  formatter: "{value} %",
          textStyle: {
            color: '#fff' // 更改坐标轴文字颜色
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['rgba(21, 238, 212, 30%)'],
            width: 1,
            type: 'solid'
          }
        }
      },
      series: [
        {
          name: '利用率',
          type: 'bar',
          // barCategoryGap: "40%",
          label: {
            show: true,
            color: '#fff',
            position: 'top'
            //  fontSize: 8,
            // formatter: function (params) {
            //   return params.value + "%";
            // },
          },
          data: [],
          itemStyle: { normal: { color: '#01d6ba' } }
        }
      ]
    }
    this.pieOptions = {
      title: {
        text: '本期成本',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}万元 ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [],
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
          data: [],
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold',
            color: 'white'
          },
          labelLine: {
            show: true,
            lineStyle: {
              width: 3
            }
          }
        }
      ]
    }
    this.pieOptions2 = {
      title: {
        text: '开累成本',
        textAlign: 'auto',
        left: '40%',
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}万元 ({d}%)'
      },
      legend: {
        left: 'center',
        top: 'bottom',
        data: [],
        textStyle: {
          color: 'white'
          // fontSize: "28",
        }
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'],
          data: [],
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold',
            color: 'white'
          },
          labelLine: {
            show: true,
            lineStyle: {
              width: 3
            }
          }
        }
      ]
    }
    return {
      Title1: '',
      Title2: '',
      Title3: '',
      Title4: '',
      date: '',
      isShowTajiDialog: false,
      isShowEquipmentDialog: false,
      isShowMaterialDialog: false,
      isShowYinLIDialog: false,
      currentYear: '',
      isZhuqiao: true,
      isLinjian: true,
      offsetTime: null,
      invest_info: {
        year: 2022,
        pro_plan: 565451.22,
        year_plan: 82310,
        // pro_complete: 158223.08,
        pro_complete: 159914,
        year_complete: 10865
      },
      yearData: [
        {
          year: 2019,
          value: 24331.56,
          planvalue: 24331.48
        },
        {
          year: 2020,
          value: 73048.12,
          planvalue: 52222.38
        },
        {
          year: 2021,
          // value: 60843.4,
          value: 73836,
          planvalue: 98053
        }
      ],
      yearIndex: 2,
      annualValueData: {
        2019: [
          ['10月', '11月', '12月'],
          [10892, 8594.69, 4844.79],
          [10892.08, 8594.69, 4844.79]
        ],
        2020: [
          [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月'
          ],
          [
            1163.92, 1603.1, 3052.46, 2618.15, 3468.15, 6710.01, 2511.45, 2421,
            6667.54, 1492.96, 8567.97, 11945.67
          ],
          [
            2052.16, 1603.1, 3075.35, 3718.37, 4831.06, 18367.51, 2536.12,
            4429.9, 6801.88, 1624.26, 11253.05, 12755.36
          ]
        ],
        2021: [
          ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
          [8948.71, 6130.22, 7990.17, 9690, 9419, 8554, 6097, 6170],
          [11097.19, 9947.66, 10769.55, 11090, 10087, 10088, 5085, 6784]
        ],
        2022: [
          ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
          [8948.71, 6130.22, 7990.17, 9690, 9419, 8554, 6097, 6170],
          [11097.19, 9947.66, 10769.55, 11090, 10087, 10088, 5085, 6784]
        ]
      },
      annualValue: 2021,
      tianqi: [],
      tianqiWeaImgUrl: '',

      progress: [
        { name: '沉井/kg', plan: '18405.5', done: '18405.5' },
        { name: '承台/个', plan: '105', done: '73' },
        { name: '钻孔桩/根', plan: '1191', done: '1153' },
        { name: '墩身/个', plan: '86', done: '24' },
        { name: '钢梁/节段', plan: '127', done: '0' },
        { name: 'CFRP索/根', plan: '14', done: '0' },
        { name: '斜拉索/根', plan: '156', done: '0' },
        { name: '吊索/根', plan: '42', done: '0' },
        { name: '预制梁/榀', plan: '846', done: '0' },
        { name: '现浇梁/米', plan: '1416.4', done: '0' }
      ],
      currentIframeSrc: '',
      eqEchartOption: {
        title: {
          text: '机械设备利用率',
          textAlign: 'auto',
          left: '40%',
          textStyle: {
            color: 'white',
            fontSize: '28'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: '{b}: {c}%'
        },
        legend: {
          orient: 'horizontal',
          // x: 'right',
          right: '2%',
          itemWidth: 16, // 图例的宽
          data: '',
          textStyle: {
            fontSize: 12, // 字体大小
            color: '#ffffff' // 字体颜色
          }
        },
        // color: ['#01d6ba', '#1069cd'],
        grid: {
          left: '4%',
          right: '4%',
          bottom: '0%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // data: ["一月", "二月", "三月", "四月"],
          data: [],
          axisLine: {
            lineStyle: {
              color: ['rgba(21, 238, 212, 30%)']
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#fff' // 更改坐标轴文字颜色
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: ['rgba(21, 238, 212, 30%)']
            }
          },
          axisLabel: {
            show: true,
            interval: 'auto',
            formatter: '{value} %',
            textStyle: {
              color: '#fff' // 更改坐标轴文字颜色
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(21, 238, 212, 30%)'],
              width: 1,
              type: 'solid'
            }
          }
        },
        series: [
          {
            name: '利用率',
            type: 'bar',
            // barCategoryGap: "40%",
            label: {
              show: true,
              color: '#fff',
              position: 'top',
              //  fontSize: 8,
              formatter: function (params) {
                return params.value + '%'
              }
            },
            data: [],
            itemStyle: { normal: { color: '#01d6ba' } }
          }
        ]
      }
    }
  },
  inject: ['getViewer', 'handleHtmlLabelShow', 'handleModelDisplay'],
  beforeDestroy () {
    this.removeResizeListener()
    this.resetCharts = null
  },
  deactivated () {
    this.removeResizeListener()
    this.resetCharts = null
  },
  activated () {
    this.getOffsetDays()
    this.getTianqiData()
    if (!this.resetCharts) {
      this.addResizeListener()
    }

    this.offsetTime = this.daysDistance(new Date(), '2019-9-1')
    // this.changeYear(2)
    // this.handleCommand(2021)

    this.cameraFlyTo()

    setTimeout(() => {
      this.handleModelDisplay([
        'zhanqiaoTileset',
        // 'chenjingTileset',
        // "ssbhzTileset",
        'lsbhzTileset',
        'xmbTileset',
        // 'zhanqiaoQingXieTileset',
        'tishengzhan8Tileset',
        'tishengzhan14Tileset',
        'liaoshiTileset',
        'cjptTileset',
        'matou13Tileset',
        'zhuqiaoTileset'
      ])

      this.handleHtmlLabelShow([
        {
          type: '1',
          handler: (event) => {
            const { Text } = event.target.params
            this.FlyTo_bim_position(Text)
          }
        }
      ])
    }, 300)

    // this.queryScheduleReportStatistic();
    this.getEbsTypeMaterialTitle()
    this.getDatasToList()
  },
  methods: {
    getDatasToList () {
      GetDatasToList().then((res) => {
        console.log(res)
        if (res.data && res.data[0]) {
          const data = JSON.parse(res.data[0].JsonText)
          console.log(data)
          this.invest_info.pro_plan = data.invest
          this.invest_info.year_plan = data['2022invest']
          this.invest_info.pro_complete = data.done
          this.invest_info.year_complete = data['2022done']

          const list = []
          list[0] = data['2022detail'].map((item, index) => index + 1 + '月')
          list[1] = data['2022detail'].map((item) => item.plan)
          list[2] = data['2022detail'].map((item) => item.done)
          this.annualValueData['2022'] = list

          this.handleCommand(2022)

          this.initeCharts()
        }
      })
    },
    handleTajiBtnClick (item) {
      this.currentIframeSrc = `http://120.202.27.77:90/WebReport11/ReportServer?reportlet=BIM/Report_${item}_New.cpt&op=write&ProjectId=06879ca8-766b-448d-9173-b6a80605710e`

      this.$nextTick(() => {
        this.isShowTajiDialog = true
      })
    },
    handleTajiBtnClick_new (item) {
      // this.currentIframeSrc = `http://120.202.27.77:90/WebReport11/ReportServer?reportlet=BIM/Report_${item}_New.cpt&op=write&ProjectId=06879ca8-766b-448d-9173-b6a80605710e`;
      switch (item) {
        case 'Equipment':
          this.LoadEquipment()
          break
        case 'Material':
          this.LoadMaterial()
          break
        case 'YinLI':
          this.LoadYinLI()
          break
      }
    },
    handleSelectChange2 (item) {
      switch (item) {
        case 'Equipment':
          this.LoadEquipment()
          break
        case 'Material':
          this.LoadMaterial()
          break
        case 'YinLI':
          this.LoadYinLI()
          break
      }
    },
    LoadYinLI () {
      // this.isShowYinLIDialog = true;
      const that = this
      GetYLList(this.date).then((res) => {
        res = res.data
        if (res.data) {
          if (res.data[0].length == 0) {
            alert('暂无数据')
            return
          }
          // 1
          var data1 = res.data[0]
          that.YChar1Option.xAxis.data = []
          that.YChar1Option.series[0].data = []
          data1.forEach((element) => {
            that.YChar1Option.xAxis.data.push(element.name)
            that.YChar1Option.series[0].data.push(parseFloat(element.Num).toFixed(5))
          })
          // 2
          data1 = res.data[2]
          that.YChar2Option.xAxis.data = []
          that.YChar2Option.series[0].data = []
          data1.forEach((element) => {
            that.YChar2Option.xAxis.data.push(element.name)
            that.YChar2Option.series[0].data.push(parseFloat(element.Num).toFixed(5))
          })
          // 3

          data1 = res.data[1]
          that.pieOptions.legend.data = data1.map((item) => item.name)
          that.pieOptions.series[0].data = data1

          // 4
          data1 = res.data[5]
          that.YChar4Option.xAxis.data = []
          that.YChar4Option.series[0].data = []
          data1.forEach((element) => {
            that.YChar4Option.xAxis.data.push(element.name)
            that.YChar4Option.series[0].data.push(parseFloat(element.Num).toFixed(5))
          })
          // 5
          data1 = res.data[6]
          that.YChar5Option.xAxis.data = []
          that.YChar5Option.series[0].data = []
          data1.forEach((element) => {
            that.YChar5Option.xAxis.data.push(element.name)
            that.YChar5Option.series[0].data.push(parseFloat(element.Num).toFixed(5))
          })

          // 6
          data1 = res.data[3]
          that.pieOptions2.legend.data = data1.map((item) => item.name)
          that.pieOptions2.series[0].data = data1

          data1 = res.data[4][0]
          that.date = data1.date
          that.Title1 =
            that.date +
            '本期利润率  ' +
            (parseFloat(data1.lirunlv) * 100).toFixed(2) +
            '%'
          that.Title2 =
            that.date +
            '开累利润率  ' +
            (parseFloat(data1.lirunlv1) * 100).toFixed(2) +
            '%'
          debugger
          that.Title3 =
            that.date +
            '本期责任成本节超率  ' +
            (parseFloat(data1.jcl) * 100).toFixed(2) +
            '%'
          that.Title4 =
            that.date +
            '开累责任成本节超率' +
           (parseFloat(data1.jcl1) * 100).toFixed(2) +
            '%'
          that.isShowYinLIDialog = true
          that.$nextTick(() => {
            that.YEchart1()
          })
        }
      })
    },
    YEchart1 () {
      const myChart = echarts.init(this.$refs.ychart1)
      myChart.setOption(this.YChar1Option)

      const myChart2 = echarts.init(this.$refs.ychart2)
      myChart2.setOption(this.YChar2Option)
      const myChart3 = echarts.init(this.$refs.ychart3)
      myChart3.setOption(this.pieOptions)

      const myChart4 = echarts.init(this.$refs.ychart4)
      myChart4.setOption(this.YChar4Option)
      const myChart5 = echarts.init(this.$refs.ychart5)
      myChart5.setOption(this.YChar5Option)
      const myChart6 = echarts.init(this.$refs.ychart6)
      myChart6.setOption(this.pieOptions2)
    },
    LoadMaterial () {
      const that = this
      GetMaterialList(this.date).then((res) => {
        res = res.data
        if (res.data) {
          var data1 = res.data[0]
          that.Char1Option.xAxis.data = []
          that.Char1Option.series[0].data = []
          that.Char1Option.series[1].data = []
          data1.forEach((element) => {
            that.date = element.AddTime
            that.Char1Option.title.text = element.AddTime + '物资损耗率'
            that.Char1Option.xAxis.data.push(element.MaterilName)
            that.Char1Option.series[0].data.push(
              parseFloat(element.SjSh * 100).toFixed(2)
            )
            that.Char1Option.series[1].data.push(
              parseFloat(element.MbSh * 100).toFixed(2)
            )
          })
          var data2 = res.data[1]
          that.Char2Option.xAxis.data = []
          that.Char2Option.series[0].data = []
          that.Char2Option.series[1].data = []
          data2.forEach((element) => {
            that.Char2Option.title.text = '开累损耗率'
            that.Char2Option.xAxis.data.push(element.MaterilName)
            that.Char2Option.series[0].data.push(
              parseFloat(element.lv * 100).toFixed(2)
            )
            that.Char2Option.series[1].data.push(
              parseFloat(element.MBsh * 100).toFixed(2)
            )
          })
          that.isShowMaterialDialog = true

          that.$nextTick(() => {
            that.MEchart1()
          })
        }
      })
    },
    MEchart1 () {
      const myChart = echarts.init(this.$refs.chart1)
      myChart.setOption(this.Char1Option)
      myChart.on('click', function (params) {
        console.log(params)
      })
      const myChart2 = echarts.init(this.$refs.chart2)
      myChart2.setOption(this.Char2Option)
      myChart2.on('click', function (params) {
        console.log(params)
      })
    },
    LoadEquipment () {
      const that = this
      GetEquipmentList(this.date).then((res) => {
        if (res.data) {
          that.eqEchartOption.xAxis.data = []
          that.eqEchartOption.series[0].data = []
          res.data.data.forEach((element) => {
            that.date = element.AddTime
            that.eqEchartOption.title.text = element.AddTime + '机械设备利用率'
            that.eqEchartOption.xAxis.data.push(element.EquipmentName)
            that.eqEchartOption.series[0].data.push(
              parseFloat(element.lyl * 100).toFixed(2)
            )
          })
          that.isShowEquipmentDialog = true

          that.$nextTick(() => {
            that.eqEchart()
          })
        }
      })
    },
    eqEchart () {
      // this.$refs.eqchart.removeAttribute("_echarts_instance_");
      const myChart = echarts.init(this.$refs.eqchart)
      myChart.setOption(this.eqEchartOption)
      myChart.on('click', function (params) {
        console.log(params)
      })
    },
    getEbsTypeMaterialTitle () {
      GetEbsTypeMaterialTitle().then((res) => {
        // console.log(res)
        // { name: "沉井/kg", plan: "18405.5", done: "18405.5" }
        if (res.data && res.data.length) {
          console.log(res.data)
          this.progress = res.data.map((item) => {
            return {
              name: item.Key,
              plan: item.TotalNum,
              done: item.CompleteNum
            }
          })

          this.progress.sort((a, b) => b.done / b.plan - a.done / a.plan)
          // console.log(this.process)
        }
      })
    },
    // queryScheduleReportStatistic() {
    // QueryScheduleReportStatistic().then((res) => {
    //   console.log(res);
    // });
    // },
    handleZhuqiaoChange (e) {
      const list = []
      if (this.isZhuqiao) {
        list.push('zhuqiaoTileset')
      }
      if (this.isLinjian) {
        list.push(
          'zhanqiaoTileset',
          // 'chenjingTileset',
          // "ssbhzTileset",
          'lsbhzTileset',
          'xmbTileset',
          // 'zhanqiaoQingXieTileset',
          'tishengzhan8Tileset',
          'tishengzhan14Tileset',
          'liaoshiTileset',
          'cjptTileset',
          'matou13Tileset'
        )

        this.handleHtmlLabelShow([
          {
            type: '1',
            handler: (event) => {
              // const { kanbanUrl } = event.target.params.MessageProperty.Json
              // if (kanbanUrl) {
              //   window.open(kanbanUrl)
              // }
              const { Text } = event.target.params
              this.FlyTo_bim_position(Text)
            }
          }
        ])
      } else {
        this.handleHtmlLabelShow([])
      }

      this.handleModelDisplay(list)
    },
    daysDistance (date1, date2) {
      // parse() 是 Date 的一个静态方法 , 所以应该使用 Date.parse() 来调用，而不是作为 Date 的实例方法。返回该日期距离 1970/1/1 午夜时间的毫秒数
      date1 = Date.parse(date1)
      date2 = Date.parse(date2)
      // 计算两个日期之间相差的毫秒数的绝对值
      var distance = Math.abs(date2 - date1)

      // 毫秒数除以一天的毫秒数,就得到了天数
      var days = Math.floor(distance / (24 * 3600 * 1000))
      return days
    },
    handleCommand (command) {
      // console.log(command);

      this.currentYear = command

      this.ndczEchartOption.xAxis.data = this.annualValueData[command][0]
      this.ndczEchartOption.series[0].data = this.annualValueData[command][1]
      this.ndczEchartOption.series[1].data = this.annualValueData[command][2]
      this.ndczEchart()
    },
    changeYear (value) {
      if (value === 1) {
        this.yearIndex--
      } else {
        this.yearIndex++
      }
      if (this.yearIndex >= 2) {
        this.yearIndex = 2
      }
      if (this.yearIndex <= 0) {
        this.yearIndex = 0
      }
      this.invest_info.year_plan = this.yearData[this.yearIndex].planvalue
      this.invest_info.year_complete = this.yearData[this.yearIndex].value
      this.invest_info.year = this.yearData[this.yearIndex].year

      this.ndtztjEchartOption.series[0].label.formatter =
        (
          (this.invest_info.year_complete / this.invest_info.year_plan) *
          100
        ).toFixed(1) + '%'
      this.ndtztjEchartOption.series[0].data[0].value =
        this.invest_info.year_plan - this.invest_info.year_complete
      this.ndtztjEchartOption.series[0].data[1].value =
        this.invest_info.year_complete
      this.ndtztjEchart()
    },
    cameraFlyTo () {
      const viewer = this.getViewer()
      viewer.camera.flyTo({
        destination: {
          x: -2704590.244041369,
          y: 4692802.535824017,
          z: 3357908.9425472016
        },
        orientation: {
          heading: 6.236143559711603,
          pitch: -0.2713315159336951,
          roll: 6.28303814219047
        }
      })
    },
    addResizeListener () {
      window.addEventListener(
        'resize',
        (this.resetCharts = () => {
          this.initeCharts()
        })
      )
    },
    removeResizeListener () {
      window.removeEventListener('resize', this.resetCharts)
    },
    initeCharts () {
      this.xmtztjEchart()
      this.ndtztjEchart()
      this.ndczEchart()
      // this.xmjdEchart()
      // this.zlglEchart()
      this.lltrEchart()
      // this.aqjyEchart()
      this.zcgyEchart()
    },
    // 左上  项目总投资统计百分比
    xmtztjEchart () {
      this.xmtztjEchartOption.series[0].label.formatter = (para) => {
        var res =
          (
            (this.invest_info.pro_complete / this.invest_info.pro_plan) *
            100
          ).toFixed(1) + '%'
        return res
      }

      this.xmtztjEchartOption.series[0].data = [
        {
          value: this.invest_info.pro_plan - this.invest_info.pro_complete,
          name: '项目总投资'
        },
        { value: this.invest_info.pro_complete, name: '完成额' }
      ]

      this.$refs.xmtzwcdechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.xmtzwcdechart)
      myChart.setOption(this.xmtztjEchartOption)
    },
    // 左上  年度投资统计百分比
    ndtztjEchart () {
      this.ndtztjEchartOption.series[0].label.formatter = (para) => {
        var res =
          (
            (this.invest_info.year_complete / this.invest_info.year_plan) *
            100
          ).toFixed(1) + '%'
        return res
      }

      this.ndtztjEchartOption.series[0].data = [
        {
          value: this.invest_info.year_plan - this.invest_info.year_complete,
          name: '项目总投资'
        },
        { value: this.invest_info.year_complete, name: '完成额' }
      ]

      this.$refs.ndtzwcdechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.ndtzwcdechart)
      myChart.setOption(this.ndtztjEchartOption)
    },
    // 左中  年度产值
    ndczEchart () {
      this.$refs.ndczechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.ndczechart)
      myChart.setOption(this.ndczEchartOption)
      myChart.on('click', function (params) {
        console.log(params)
      })
    },
    // 左下  项目进度
    xmjdEchart () {
      this.$refs.xmjdechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.xmjdechart)
      myChart.setOption(this.xmjdEchartOption)
    },
    // 左下  开工天数
    getOffsetDays () {
      var currentTime = Date.now()
      var targetTime = new Date(2020, 7, 0, 0, 0, 0).getTime()
      this.offsetTime = Math.floor(
        Math.abs(currentTime - targetTime) / (3600 * 24 * 1e3)
      )
    },
    // 右上  天气信息
    getTianqiData () {
      var that = this
      axios
        // .get(
        //   'https://ops.mlogcn.com/qxcm-construction/api/alarm/point/weather/api1?lon=119.978878&lat=31.996256'
        // )
        .get(
          'https://v0.yiketianqi.com/api?version=v91&appid=94555453&appsecret=3ElJEeba&city=常州'
        )
        .then((res) => {
          console.log(res)
          that.tianqi = res.data.data
          window.test = that.tianqi
          that.tianqiWeaImgUrl = require('../../assets/weather/' +
            that.tianqi[0].wea_img +
            '.png')
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 右中  劳力投入
    lltrEchart () {
      this.$refs.lltrjhechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.lltrjhechart)
      myChart.setOption(this.lltrjhEchartOption)
      myChart.on('click', function (params) {
        console.log(params)
      })
    },
    // 右中  质量管理
    zlglEchart () {
      this.$refs.zlglechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.zlglechart)
      myChart.setOption(this.zlglEchartOption)
      myChart.on('click', function (params) {
        console.log(params)
      })
    },
    // 右中  图片放大显示
    changeCenterBigShow (type, title, url) {
      // this.$parent.changeCenterBigShow(type,title,url);
      alert('暂无图片')
    },
    // 右下  主材供应
    zcgyEchart () {
      this.$refs.zcgyechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.zcgyechart)
      myChart.setOption(this.zcgyjhEchartOption)
      myChart.on('click', function (params) {
        console.log(params)
      })
    },
    // 右下  安全教育
    aqjyEchart () {
      this.$refs.aqjyechart.removeAttribute('_echarts_instance_')
      const myChart = echarts.init(this.$refs.aqjyechart)
      myChart.setOption(this.aqjyEchartOption)
    },
    // 右下
    changeAqgl (type) {
      if (type === 'aqjy') {
        const myChart = echarts.init(this.$refs.aqjyechart)
        myChart.setOption(this.aqjyEchartOption)
      } else if (type === 'yhtj') {
        const myChart = echarts.init(this.$refs.aqjyechart)
        myChart.setOption(this.yhtjEchartOption)
      }
    },

    FlyTo_bim_position (name, index) {
      if (name === '14#墩提升站' || name === 'S1#墩提升站') {
        viewer.camera.flyTo({
          destination:
            this.bimPosition[this.bimPosition.length - 1].destination,
          orientation:
            this.bimPosition[this.bimPosition.length - 1].orientation
        })
        return
      }
      for (var i = 0; i < this.bimPosition.length; i++) {
        if (this.bimPosition[i].name === name) {
          viewer.camera.flyTo({
            destination: this.bimPosition[i].destination,
            orientation: this.bimPosition[i].orientation
          })
        }
      }
    }
  }
}
</script>

<style lang="less">
.mainPage {
  pointer-events: none;

  .check-area {
    pointer-events: all;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50px;
    left: 0;
  }

  .iframe-btn-container {
    width: 80px;
    position: absolute;
    top: 5%;
    right: 25%;

    div {
      pointer-events: all;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      color: white;
      font-size: 15px;
      border: 1px solid #01d6ba;
      border-radius: 5px;
      background-color: rgba(255, 255, 255, 0.1);
      margin-bottom: 10px;
    }

    div:hover {
      background-color: rgba(15, 58, 111, 0.5);
    }
  }

  .el-dialog {
    background: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: all;

    .el-dialog__header {
      padding: 0;
      background: url("../../assets/intelligent-video/上.png") no-repeat 0 0;
      background-size: 100% 100%;
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 20px;
      position: relative;

      span {
        font-size: 20px;
        font-weight: bold;
        color: white;
      }

      .el-dialog__headerbtn {
        top: 0;
        bottom: 0;
        margin: auto;

        i {
          color: white;
          font-weight: bold;
        }
      }
    }

    .el-dialog__body {
      width: 100%;
      flex: 1;
      background: url("../../assets/intelligent-video/下.png") no-repeat 0 0;
      background-size: 100% 100%;
      padding: 5px 10px 10px;
    }
  }

  .taji-dialog.el-dialog__wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    .title {
      height: 40px;
      color: #fff;
      font-size: 16px;
      margin-left: 20px;
      line-height: 24px;
    }
    .left_center_echart {
      width: 100%;
      height: 80%;
      margin-top: 10px;
    }
    .center_echart {
      width: 100%;
      height: 40%;
      margin-top: 10px;
    }
    .diadiv_title {
      width: 100%;
      height: 30px;

      display: flex;
      flex-direction: row;
      .divchar {
        width: 33%;
        height: 100%;
        text-align: center;
        color: white;
        /* font-weight: 500; */
        font-weight: bold;
        font-size: 20px;
      }
    }
    .diadiv {
      width: 100%;
      height: 40%;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      .divchar {
        width: 33%;
        height: 100%;
      }
    }
    & > div {
      margin-top: 0 !important;
    }
  }

  .left_Com {
    pointer-events: all;
    position: absolute;
    left: calc(1.25% + 10px);
    top: 5%;
    width: 400px;
    // height: 720px;
    height: 77%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .left_top,
    .left_center,
    .left_bottom {
      width: 100%;
      flex: 1;
      position: relative;
      height: 230px;
      background: url("../../assets/main/模块底板.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 10px;
      .title {
        height: 10%;
        color: #fff;
        font-size: 16px;
        margin-left: 20px;
        line-height: 24px;
      }
    }
    .left_top {
      .invest {
        height: 14%;
        .pro_invest {
          color: rgb(255, 255, 255);
          font-size: 15px;
          font-weight: bold;
          position: relative;
          left: 50px;
          top: 10px;
        }
        .year_invest {
          color: rgb(255, 255, 255);
          font-size: 15px;
          font-weight: bold;
          position: relative;
          left: 145px;
          top: 10px;
          i {
            font-style: normal;
          }
        }
      }
      .plan_amount {
        height: 15%;
        .amount {
          color: rgb(1, 214, 186);
          font-size: 24px;
          font-weight: bold;
          position: relative;
        }
        .danwei {
          color: rgb(1, 214, 186);
          font-size: 14px;
          font-weight: bold;
          position: relative;
        }
      }
      .completed_amount {
        height: 12%;
        .zwc {
          color: rgb(41, 169, 255);
          font-size: 14px;
          font-weight: bold;
          position: relative;
        }
        .ndwc {
          color: rgb(41, 169, 255);
          font-size: 14px;
          font-weight: bold;
          position: relative;
          left: 88px;
        }
      }
      .left_top_echarts {
        height: 33%;
        .xmtzwcd {
          position: absolute;
          left: 45px;
          width: 100px;
          height: 33%;
        }
        .ndtzwcd {
          position: absolute;
          left: 236px;
          width: 100px;
          height: 33%;
        }
      }
      .xmtzwcd_text {
        color: rgb(255, 255, 255);
        font-size: 13px;
        font-weight: bold;
        position: relative;
      }
    }
    .left_center {
      .left_center_echart {
        width: 100%;
        height: 80%;
        margin-top: 10px;
      }
    }
    .left_bottom {
      height: 250px;
      .xmjdinfo {
        margin: 5px 20px;
        .name {
          color: #fff;
          font-size: 16px;
        }
        .val {
          font-size: 20px;
          color: #39bbff;
          font-weight: 600;
          margin: 0 30px 0 10px;
        }
        .val1 {
          font-size: 20px;
          color: #27e553;
          font-weight: 600;
          margin: 0 0 0 10px;
        }
      }
      .left_bottom_echart {
        width: 100%;
        height: 73%;
        overflow: hidden;
        overflow-y: scroll;
        & > div {
          position: relative;
          display: flex;
          font-size: 15px;
          color: #fff;
          padding: 8px 0;
          padding-left: 10px;

          & > div:first-child {
            width: 100px;
          }
          & > div:last-child {
            width: 100%;
          }
        }
        .el-progress__text {
          color: #fff;
        }
      }
    }
  }

  .right_Com {
    pointer-events: all;
    position: absolute;
    right: calc(1.25% + 10px);
    top: 5%;
    width: 400px;
    height: 77%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .right_top,
    .right_center,
    .right_bottom {
      width: 100%;
      flex: 1;
      position: relative;
      height: 230px;
      background: url("../../assets/main/模块底板.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 10px;
      .title {
        color: #fff;
        font-size: 16px;
        margin-left: 20px;
        line-height: 24px;
      }
    }
    .right_top {
      .n_top {
        width: 100%;
        margin-top: -5px;
        height: calc(50% - 30px);
        display: flex;
        color: #fff;
        padding-left: 0px;
        .n_top_chilren1 {
          width: 45%;
          height: 100%;
          .address {
            font-size: 20px;
            line-height: 60px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .temperature {
            font-size: 23px;
            line-height: 28px;
            // text-align: center;
            margin-left: 12px;
            font-weight: 600;
            text-align: center;
          }
        }
        .n_top_chilren2 {
          width: 26%;
          height: 100%;
          text-align: center;
          img {
            width: 80px;
            height: 80px;
            margin-top: 20px;
          }
        }
        .n_top_chilren2 {
          width: 20%;
          height: 100%;
        }
        .n_top_chilren3 {
          width: 30%;
          height: 100%;
          // margin-left: 20px;
          padding: 20px 0;
          padding-left: 20px;
          p {
            line-height: 26px;
            word-break: keep-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
      .n_bottom {
        width: 100%;
        height: calc(50% - 20px);
        margin-top: 15px;
        text-align: center;
        margin-left: 3px;
        p {
          color: #b9ebff;
          line-height: 35px;
          font-size: 14px;
          .week {
            display: inline-block;
            width: 17%;
            text-align: center;
          }
          .weather {
            display: inline-block;
            width: 30%;
            text-align: center;
          }
          .temperature {
            display: inline-block;
            width: 20%;
            text-align: center;
          }
          .wind {
            display: inline-block;
            width: 30%;
          }
        }
      }
    }
    .right_center {
      .right_center_echart {
        width: 100%;
        height: 80%;
        margin-top: 10px;
      }
      // display: flex;
      // flex-direction: column;
      // justify-content: space-between;
      // overflow: hidden;
      // .n_top{
      // width: 100%;
      // // margin-top: -5px;
      // height:55%;
      // display: flex;
      // color: #fff;
      // // background-color: #fff;
      // .right_center_echart{
      //   width: 100%;
      //   height: 100%;
      //   margin-top: 10px;
      // }
      // }
      // .n_bottom{
      // width: 100%;
      // height: 45%;
      // text-align: center;
      // }
    }
    .right_bottom {
      .right_bottom_echart {
        width: 100%;
        height: 80%;
        margin-top: 10px;
      }
      // position: relative;
      // color: #fff;
      // .aqjy{
      //   position: absolute;
      //   left: 20px;
      //   top: 45px;
      //   background:  url("../../assets/main/模块按钮-正常.png") no-repeat;
      //   background-size:100% 100%;
      //   padding:4px ;
      //   // z-index: 10001;
      //   cursor: pointer;
      // }
      // .aqjy:hover{
      //   background:  url("../../assets/main/模块按钮-选中.png") no-repeat;
      //   background-size:100% 100%;
      // }
      // .yhtj{
      //   position: absolute;
      //   left: 20px;
      //   top: 80px;
      //   background:  url("../../assets/main/模块按钮-正常.png") no-repeat;
      //   background-size:100% 100%;
      //   padding:4px ;
      //   // z-index: 10001;
      //   cursor: pointer;
      // }
      // .yhtj:hover{
      //   background:  url("../../assets/main/模块按钮-选中.png") no-repeat;
      //   background-size:100% 100%;
      // }
      // .aqgl-echart{
      //     width: 100%;
      //     height: 90%;
      // }
    }
  }

  .bottom_Com {
    pointer-events: all;
    position: absolute;
    left: calc(1.25% + 10px);
    bottom: 3%;
    width: calc(97.5% - 20px);
    height: 15%;
    background: url("../../assets/main/底部.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .bottom_title {
      .title {
        float: left;
        color: #fff;
        font-size: 16px;
        margin-left: 20px;
        line-height: 24px;
      }
      .content {
        float: left;
        // position: relative;
        font-weight: bold;
        font-size: 15px;
        list-style-type: square;
        margin-right: 10px;
        margin-left: 20px;
        margin-top: 5px;
      }
    }
    .bottom_timeLine {
      width: 100%;
      height: 100%;
      float: left;
      margin-top: 2px;
      white-space: nowrap;
      // overflow-x: scroll;
      // overflow-y: scroll;
      // overflow-y: hidden;
      .my_timeline {
        width: 100%;
        height: 100%;
        padding-left: 4px;
        .my_timeline_item {
          margin-top: 5px;
          float: left;
          width: 170px;
          height: 95%;
          margin-left: 28px;
          .my_timeline_time {
            height: 25%;
            width: 170px;
            text-align: center;
            font-size: 13px;
            font-weight: bold;
          }
          .my_timeline_node {
            box-sizing: border-box;
            border-radius: 50%;
            cursor: pointer;
            width: 15px;
            height: 15px;
            margin-left: 80px;
          }
          .my_timeline_Line {
            width: 91%;
            height: 0%;
            margin-left: 110px;
            margin-top: -10px;
            border-left: none;
          }
          .my_timeline_content {
            width: 180px;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            height: 25%;
            margin-top: 6%;
            white-space: pre-line;
          }
        }
      }
    }
  }
}

.left {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  left: -45px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  cursor: pointer;
}
.right {
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  left: 135px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.dropdown {
  position: absolute;
  right: 10px;
  color: rgb(1, 214, 186);
  border: 1px solid rgb(1, 214, 186);
  padding: 0 5px;
  border-radius: 5px;
}
.el-progress-bar__outer {
  background-color: rgb(1, 214, 186);
}
</style>
